<template>
    <div class="footer">
        <div class="main1200">
            <div class="top">
                <div class="navigation" v-if="!isMobile">
                    <ul>
                        <li class="title">Support</li>
                        <li><router-link to="/">FAQ</router-link></li>
                        <li><router-link to="/">Return & Refund policy</router-link></li>
                        <li><router-link to="/">General Warranty</router-link></li>
                        <li><router-link to="/">Shipping Policy</router-link></li>
                        <li><router-link to="/">User Manuals</router-link></li>
                        <li><router-link to="/">Contact Us</router-link></li>
                    </ul>
                    <ul>
                        <li class="title">Product</li>
                        <li><router-link to="/">Male Masturbator</router-link></li>
                        <li><router-link to="/">xxx Vibrator</router-link></li>
                        <li><router-link to="/">xxxx suction vibrator</router-link></li>
                    </ul>
                    <ul>
                        <li class="title">About Us</li>
                        <li><router-link to="/brandStory">Our Story</router-link></li>
                        <li><router-link to="/appIntroduction">Matelink APP</router-link></li>
                        <li><router-link to="/affiliate">Affiliate Program</router-link></li>
                        <li><router-link to="/">Reseller</router-link></li>
                        <li><router-link to="/">Blog</router-link></li>
                    </ul>
                </div>

                <el-collapse v-else>
                    <el-collapse-item title="Support" name="1">
                        <template #icon="{ isActive }">
                            <span class="icon-ele">
                                <template v-if="isActive">
                                    <el-icon>
                                        <Minus />
                                    </el-icon>
                                </template>
                                <template v-else>
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </template>
                            </span>
                        </template>
                        <div>
                            <router-link to="/">FAQ</router-link>
                            <router-link to="/">Return & Refund policy</router-link>
                            <router-link to="/">General Warranty</router-link>
                            <router-link to="/">Shipping Policy</router-link>
                            <router-link to="/">User Manuals</router-link>
                            <router-link to="/">Contact Us</router-link>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="Product" name="2">
                        <template #icon="{ isActive }">
                            <span class="icon-ele">
                                <template v-if="isActive">
                                    <el-icon>
                                        <Minus />
                                    </el-icon>
                                </template>
                                <template v-else>
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </template>
                            </span>
                        </template>
                        <div>
                            <router-link to="/">Male Masturbator</router-link>
                            <router-link to="/">xxx Vibrator</router-link>
                            <router-link to="/">xxxx suction vibrator</router-link>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="About Us" name="3">
                        <template #icon="{ isActive }">
                            <span class="icon-ele">
                                <template v-if="isActive">
                                    <el-icon>
                                        <Minus />
                                    </el-icon>
                                </template>
                                <template v-else>
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </template>
                            </span>
                        </template>
                        <div>
                            <router-link to="/brandStory">Our Story</router-link>
                            <router-link to="/appIntroduction">Matelink APP</router-link>
                            <router-link to="/affiliate">Affiliate Program</router-link>
                            <router-link to="/">Reseller</router-link>
                            <router-link to="/">Blog</router-link>
                        </div>
                    </el-collapse-item>
                </el-collapse>
                <div class="others">
                    <div class="discountBox">
                        <p class="title">Sign up our newsletter and get discount</p>
                        <p class="desc">Sign up to get 10% off your first purchase and exclusive access to our top
                            offers.</p>
                        <div class="inputBox">
                            <el-input placeholder="Your email address" v-model="email"></el-input>
                            <div class="btn" @click="submit"><img src="@/assets/images/footer_btn_icon.svg"></div>
                        </div>
                    </div>
                    <div class="followBox">
                        <p class="title">Follow Us</p>
                        <div class="iconBox">
                            <img src="@/assets/images/footer_icon1.svg">
                            <img src="@/assets/images/footer_icon2.svg">
                            <img src="@/assets/images/footer_icon3.svg">
                            <img src="@/assets/images/footer_icon4.svg">
                            <img src="@/assets/images/footer_icon5.svg">
                            <img src="@/assets/images/footer_icon6.svg">
                            <img src="@/assets/images/footer_icon7.svg">
                            <img src="@/assets/images/footer_icon8.svg">
                        </div>
                    </div>
                    <div class="paymentBox">
                        <p class="title">Secure Payment</p>
                        <img src="@/assets/images/footer_pic1.png" alt="payment" />
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="instructions">
                    <span class="copyright" v-if="!isMobile">Copyright © 2024 by PURE IMAGINATION AI PTE. LTD.</span>
                    <span>Privacy Policy</span>
                    <span class="point">·</span>
                    <span>T&C</span>
                    <span class="point">·</span>
                    <span>Security</span>
                </div>
                <p class="disclaimer">Age Disclaimer</p>
                <p class="ageCont">Every model featured on this website is 18+ years old. By accessing this site, you
                    confirm that you are legally allowed to view adult content in your region and that you desire to do
                    so.</p>
                <span class="copyright" v-if="isMobile">Copyright © 2024 by PURE IMAGINATION AI PTE. LTD.</span>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
const email = ref('');
const app = getCurrentInstance();
const isMobile = app?.appContext.config.globalProperties.$isMobile;

const submit = () => {
    //验证邮箱是否是正确的邮箱格式
    const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
    if (!reg.test(email.value)) {
        ElMessage({
            message: 'Invalid Email',
            type: 'warning'
        });
        return;
    } else {
        //todo
        ElMessage({
            message: 'Discount received successfully, enter this email address on the payment order page to get the discount.',
            type: 'success'
        });
    }

}

</script>
<style lang="scss" scoped>
.footer {
    background: #282828;
    padding: 45px 0 65px;

    .top {
        display: flex;
        justify-content: space-between;

        .navigation {
            display: flex;

            ul {
                list-style: none;
                padding-left: 0;
                margin-right: 65px;

                li {
                    font-size: 16px;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 22px;
                    margin-bottom: 20px;

                    a {
                        color: #999999;
                        text-decoration: none;
                    }
                }

                .title {
                    font-size: 18px;
                    font-weight: 700;
                    margin-bottom: 32px;
                }
            }
        }

        .others {
            width: 340px;

            .discountBox {
                .title {
                    font-size: 16px;
                    font-weight: 600;
                    color: #FFFFFF;
                    margin-bottom: 18px;
                    line-height: 20px;
                }

                .desc {
                    font-size: 16px;
                    font-weight: 400;
                    color: #999999;
                    margin-bottom: 18px;
                }

                .inputBox {
                    display: flex;
                    align-items: center;
                    margin-bottom: 50px;
                    width: 330px;
                    height: 42px;
                    border-radius: 8px 4px 4px 8px;
                    overflow: hidden;

                    .el-input {
                        height: 42px;
                        flex: 1;
                    }

                    :deep(.el-input__wrapper) {
                        background: #333333;
                        box-shadow: none;
                        border-radius: 0;
                    }

                    .btn {
                        width: 42px;
                        height: 42px;
                        background: #846FC1;
                        color: #FFFFFF;
                        font-size: 16px;
                        font-weight: 700;
                        text-align: center;
                        line-height: 40px;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }

            .followBox {
                .title {
                    font-size: 16px;
                    font-weight: 600;
                    color: #FFFFFF;
                    margin-bottom: 30px;
                    line-height: 20px;
                }

                .iconBox {
                    display: flex;
                    margin-bottom: 25px;

                    img {
                        width: 18px;
                        margin-right: 16px;
                        cursor: pointer;
                    }
                }
            }

            .paymentBox {
                .title {
                    font-size: 16px;
                    font-weight: 600;
                    color: #FFFFFF;
                    margin-bottom: 20px;
                    line-height: 20px;
                }

                img {}
            }
        }
    }

    .bottom {
        margin-top: 24px;
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        line-height: 17px;

        .instructions {
            line-height: 66px;

            .copyright {
                margin-right: 29px;
            }

            .point {
                margin: 0 5px;
            }
        }

        .ageCont {
            margin-top: 10px;
        }
    }
}

@media screen and (max-width: 750px) {
    .footer {
        padding: 0.8rem 0.6rem;

        .top {
            flex-direction: column;

            :deep(.el-collapse) {
                border: none;

                .el-collapse-item__header {
                    background: none;
                    color: #fff;
                    justify-content: space-between;
                    font-size: 0.3rem;
                    height: 1.2rem;
                }

                .el-collapse-item__wrap {
                    background: none;
                }

                .el-collapse-item__content {
                    color: #fff;

                    a {
                        display: block;
                        margin-bottom: 0.49rem;
                        font-size: 0.24rem;
                    }
                    a:last-child {
                        margin-bottom: 0;
                    }
                }
            }

            .others {
                width: 100%;
                margin-top: 0.4rem;

                .discountBox {
                    .title{
                        font-size: 0.3rem;
                    }
                    .desc{
                        font-size: 0.24rem;
                    }
                    .inputBox {
                        width: 100%;
                    }
                }
                .followBox {
                    .title{
                        font-size: 0.3rem;
                    }
                    .iconBox {
                        img {
                            width: 0.43rem;
                            margin-right: 0.38rem;
                        }
                    }
                }
                .paymentBox {
                    .title{
                        font-size: 0.3rem;
                    }
                    img{
                        width: 100%;
                    }
                }
            }
        }

        .bottom {
            font-size: 0.22rem;
            .instructions {
                line-height: 0.53rem;
            }

            .disclaimer {
                margin: 0.36rem 0;
            }

            .copyright {
                margin-top: 0.24rem;
                display: block;
            }
        }
    }

}
</style>